<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库 TeleDB for TSDB</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          时间序列数据库（Time Series Database , 简称
          TSDB），用于处理按照时间顺序变化的数据。提供对时序数据的高效存储、快速查询能力，以及丰富的数据管理能力。适合于物联网和互联网领域，实现对设备及业务服务的实时监控和告警。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.name"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <p>{{ item.label }}</p>
            <div class="img-box bor">
              <img :src="item.imgUrl" alt="" />
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="section-title mt-10">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav9',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '高可用',
          label:
            'TSD实例分布式部署，故障自动转移，支持平滑扩容，数据均衡自实现；三副本数据分布式存储，数据可靠性达99.99999%。'
        },
        {
          name: '强处理能力',
          label:
            '公有开通版可达24万数据点每秒的写入处理能力，定制版每秒写入可高达100万数据点，秒级查询；同时支持数据差值及多种聚合函数。'
        },
        {
          name: '低成本存储',
          label:
            '采用自研发实现的高压缩算法，最高可达20倍压缩率，大大降低存储成本；支持数据定期合并；支持TTL管理。'
        },
        {
          name: '多元化数据管理',
          label:
            '支持数据的多元复合查询、删除；支持时间线清理；支持自定义数据时效配置；支持数据导入导出。'
        },
        {
          name: '丰富的数据计算',
          label:
            '支持差值查询，自动补齐缺省数据，默认为线性插值算法；提供并支持多达18种聚合函数，支持降精聚合，支持嵌套聚合；支持按标签过滤，按值过滤。'
        },
        {
          name: '配置化应用',
          label:
            '提供SDK及Restful API；支持用户访问白名单配置；支持用户访问Token配置；做到开箱即用，简单配置即可应用。'
        },
        {
          name: '多维监控',
          label:
            '提供准实时存储空间、时间序列使用情况监控；提供实时每秒读写请求数、数据点数监控。'
        }
      ],
      tabList: [
        {
          title: '场景1',
          name: '0',
          imgUrl: require('../../assets/images/pic/img-9-1.png'),
          label:
            '物联网IoT设备监控及分析应用场景：满足IoT对海量数据高速写入、低存储成本、低延时查询、数据统计、趋势分析等需求。'
        },
        {
          title: '场景2',
          name: '1',
          imgUrl: require('../../assets/images/pic/img-9-2.png'),
          label:
            '互联网业务性能监控服务：互联网企业需要对主机、网络及其它硬件设备的监控，对交易情况、处理性能、异常等进行实时监控告警。TeleDB for TSDB可以提供高性价比的存储方案，实时的任意维度时序聚合计算，是运维监控数据存储的理想选择。'
        },
        {
          title: '场景3',
          name: '2',
          imgUrl: require('../../assets/images/pic/img-9-3.png'),
          label:
            '工业及能源化工设备监测管理场景：各类工业设备不断产生大量的时间序列数据，需要实时高效写入及聚合运算，从而及时准确监测到异常状况，TeleDB for TSDB能够提供高效存取、低成本存储、高速访问、实时告警信息，实现设备实时监控及分析。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-9.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
